<template>
  <div class="loginPage">
    <div class="formBox">
      <ocn-mainForm :form="formConfig" :submit="submit"></ocn-mainForm>
    </div>

    <el-button type="primary" round @click="doLogin">登录</el-button>
  </div>
</template>

<script>
export default {
  name: "loginPage",
  data() {
    return {
      formConfig: {
        deliver: {
          userName: "",
          password: "",
        },
        rules: {
          userName: [
            {
              required: true, // 是否必填
              message: "用户名能为空！", // 未必填提示的异常信息
              trigger: "blur", // 校验时机 blur-输入项失去焦点时；change-输入项内容变更时；
            },
          ],

          password: [
            {
              required: true, // 是否必填
              message: "密码不能为空！", // 未必填提示的异常信息
              trigger: "blur", // 校验时机 blur-输入项失去焦点时；change-输入项内容变更时；
            },
          ],
        },
        proto: [
          {
            type: "text",
            label: "用户名",
            value: "userName",
            maxlength: 100,
            placeholder: "请输入用户名",
            prefix_icon: "",
            suffix_icon: "",
            prepend_icon: "el-icon-s-custom",
            prepend_style: {
              "--background_color": "#e1f0ff",
              "--color": "#007dff",
            },

            clearable: true,
            show_password: false,
            show_word_limit: false,
            disabled: false,
            readonly: false,
            validate_event: true,
            size: "medium",
          },
          {
            type: "text",
            label: "密码",
            value: "password",
            maxlength: 100,
            placeholder: "请输入密码",
            prefix_icon: "",
            suffix_icon: "",
            prepend_icon: "el-icon-key",
            prepend_style: {
              "--background_color": "#e1f0ff",
              "--color": "#007dff",
            },

            autosize: {
              minRows: 2,
              maxRows: 6,
            },

            clearable: true,
            show_password: true,
            show_word_limit: false,
            disabled: false,
            readonly: false,
            validate_event: true,
            size: "medium",
          },
        ],
      },
    };
  },
  created() {},
  mounted() {},
  activated() {},
  deactivated() {},
  methods: {
    doLogin() {
      this.toPage("/home");
    },

    toPage(basePath, queryParams) {
      this.$utils.rout("to", basePath, queryParams);
    },

    submit(formDeliver) {
      console.log("loginPage:", formDeliver);
    }
  },
};
</script>
<style lang="scss" scoped>
.loginPage {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .formBox {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
</style>
